<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>音视频通话</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="container">
        <h1>音视频通话</h1>
        <hr>
        <div id="videoContainer" class="video-container" align="center">
            <!-- 本地视频流 -->
            <div class="video-item">
                <span class="video-title" id="localStreamId"></span>
                <video class="video-play" id="localVideo" controls autoplay muted webkit-playsinline></video>
            </div>
            <!-- 远端视频流 -->
            <div class="video-item">
                <span class="video-title" id="remoteStreamId"></span>
                <video class="video-play" id="remoteVideo" controls autoplay muted webkit-playsinline></video>
            </div>
        </div>
        <hr>
        <input type="text" id="userName" placeholder="请输入用户名" />
        <input type="text" id="roomName" placeholder="请输入房间号" />
        <button id="startConn">连接</button>
        <button id="joinRoon">加入房间</button>
        <button id="hangUp">挂断</button>
        <!-- WebRTC兼容文件 -->
        <script src="/js/adapter-latest.js"></script>
        <script src="main.js"></script>
    </div>
</body>

</html>